<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="add">点我+1</button>
    <hr>
    <img v-for="(dog,index) in dogList" :src="dog" :key="index">
    <hr>
    <button @click="getDog">再来一只狗</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import userSum from "@/hooks/useSum"
import userDog from "@/hooks/useDog"

const { sum, add } = userSum()
const { dogList, getDog } = userDog()
</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
  }
button { 
    margin: 0 5px;
}
img{
  height: 100px;
  margin-right: 10px;
}
</style>


